[GitHub Blocks] 様々なドキュメントを2種類のインターフェースで同時に閲覧/編集できる “Edit with Preview” で GitHub の未来を感じてみる

こんにちは、CX事業本部 Delivery部の若槻です。

前回のエントリでは、GitHub リポジトリ上のファイルの閲覧や編集機能をカスタマイズできる GitHub Blocks について紹介しました。

この GitHub Blocks では、ファイルに Blocks を適用してインターフェースの拡張を行います。Blocks は公式またはサードパーティ開発され、外部のリポジトリから読み込まれる UI 実装で、様々な拡張子のファイルに対する Blocks が用意されています。

今回は、様々なファイルを2種類の Blocks で同時に閲覧/編集できる Edit with Preview Blocks で、 GitHub によるドキュメント操作の未来を感じることができたのでご紹介します。

Edit with Preview とは

Edit with Preview は、GitHub により公式提供されている Blocks です。ファイルを2種類の Blocks で左右に分割表示して同時に閲覧/編集できます。

デモ用の公式リポジトリ上のファイルを Edit with Preview で開いてみます。

するとファイルを2種類の Block で同時に開けました。左側がファイルの編集が可能な「Code」Blocks 、右側が Markdown ファイルのプレビューが可能な「Markdown」Blocks です。

プレビューで開かれる Block は、現在のファイルの拡張子によって決まります。.md であれば 「Markdown」となります。

また分割されたウィンドウごとに任意の Blocks を選択することもできます。

もちろん、編集権限のあるリポジトリであれば、編集しながら Live Preview 表示することも可能です。

ただし、現時点での Edit with Preview では、「Code」側で1文字編集するたびに画面更新が走ってしまいます。ソースコードを見るとフレームワークは React で、編集中のコンテンツの保持に useState が使われているので、変更があるたびにステートが更新され、レンダリングが走っているようです。ここは改善の余地がありそうですね。

色々なファイルで試してみた

前述の通り、Edit with Preview では開いたファイルの拡張子によって適用される Blocks が決まります。ここではデモ用の公式リポジトリ上の様々なファイルで Edit with Preview を試してみます。

JSON

JSON（.json）ファイルを選択した場合は「JSON explorer」によるプレビューが行われます。JSON オブジェクトの階層構造を折りたたみ表示できるので、大きな JSON ファイルを開いても見やすくなっています。

3Dモデル（.glb）

3Dモデル（.glb）ファイルを選択した場合は「3D model」によるプレビューが行われます。プレビューされた3Dモデルはマウスで操作することができます。

Excaildraw

Excaildraw（.excaildraw）ファイルを選択した場合は「Excaildraw diagram」によるプレビューが行われます。

Excaildraw は、オープンソースの手書きスタイルの図形描画ツールおよびファイル形式です。

React（.tsx）

React（.tsx）ファイルを選択した場合は「React component feedback」によるプレビューが行われます。これにより React コンポーネントを別途ビルドすることなくプレビューすることができ、UI 開発のレビューが容易になります。

Mermaid

Mermaid（.mermaid）ファイルを選択した場合は「Mermaid Block」によるプレビューが行われます。

Mermaid は図形やグラフを Markdown で記述して描画することができるツールです。

シーケンス図やフローチャートなどの設計ドキュメントをプレビューしながら作成する際に便利そうですね。

CSS

CSS（.css）ファイルを選択した場合は「CSS Styleguide」でプレビューが行われます。CSS ファイルの表示をその場で確認出来るのは便利ですね。エンジニアとデザイナーとの連携も容易になりそうです。

CSV

CSV（.csv）ファイルを選択した場合は「Spreadsheet」でプレビューが行われます。

「Spreadsheet」は下記のようなテーブル形式のビューワーとなります。各カラムの統計情報がチャートで表され、フィルター操作も可能です。

GitHub で CSV のようなデータセットを管理する使い方は聞き慣れないかも知れませんが、GitHub Next のプロジェクトである Flat Data で提唱されているアプローチとなっています。

p5.js

p5.js ファイルを選択した場合は「p5.js」によるプレビューが行われます。

p5.js は JavaScript で記述されたクリエイティブコーディング用のフレームワークです。

おわりに

GitHub Blocks で、様々なファイルを2種類の Blocks で同時に閲覧/編集できる Edit with Preview Blocks について紹介しました。

まだ若干の粗はありますが、GitHub によるドキュメント操作の未来を感じることができました。現在は Technical Preview の段階で、またソースコードは OSS なので着実に改善や Blocks の追加が今後行われていくことでしょう。ワクワクしますね。

GitHub Blocks は下記よりアクセスすることができますので、是非試してみてください。

参考

以上